<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/media/css/style.css" rel="stylesheet" type="text/css">
    <link href="/media/css/fileuploader.css" rel="stylesheet" type="text/css">
    <link href="/media/css/jquery.ui.all.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/media/js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.accordion.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.button.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.position.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.tabs.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.dialog.js"></script>
    <script src="/media/js/fileuploader.js" type="text/javascript"></script>
    <script src="/media/js/jquery-string.1.0.js" type="text/javascript"></script>
    <script src="/media/js/core.js" type="text/javascript"></script>
    <style type="text/css">
	.ui-autocomplete-loading { background: white url('/media/ui-anim_basic_16x16.gif') right center no-repeat; }
	.loading {background: white url('/media/ui-anim_basic_16x16.gif') right center no-repeat; height: 16px; width: 16px;}
	.ui-accordion .ui-accordion-header .folder { background: white url('/media/icon/folder.png'); height: 16px; width: 16px;}
	.ui-accordion .ui-accordion-header .binary { background: white url('/media/icon/binary.png'); height: 16px; width: 16px;}
    </style>
    <script type="text/javascript">
        var current_path = '{{path}}';
	var current_search = '';
	var uploader;
        function createUploader(){
            uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader'),
                action: '/',
		params: {'path': '{{path}}'},
		onComplete: init
            });
        }
        
        // in your app create uploader as soon as the DOM is ready
        // don't wait for the window to load
        window.onload = createUploader;

	function loadFileList(path){
	    $('#fileList-container .loading').remove();
	    $('<div class="loading"/>').insertBefore('#fileList');
	    $('#fileList-container').load(path + '?action=lsdir', initFileListDisplay);
	    current_path = path;
	    if (uploader) {
	        uploader.setParams({'path':current_path});
	    }
	}
	
	function loadGroupList(){
	    $('#groupList-container .loading').remove();
	    $('<div class="loading"/>').insertBefore('#groupList');
	    $('#groupList-container').load('/groups/?action=lsgroup', initGroupListDisplay);
	}
	
	function initFileListDisplay() {
	    $("#fileList .loading").remove();
	    $("#fileList").accordion({
		collapsible: true,
		active: false,
		autoHeight: false,
		event: 'expand'
	    });
	    $(".tabs").tabs();
	    $(".tabs-ajax").tabs({
			ajaxOptions: {
				error: function(xhr, status, index, anchor) {
					$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
				}
			}
		})
	}
	
	function initGroupListDisplay() {
	    $("#groupList .loading").remove();
	    $("#groupList").accordion({
		collapsible: true,
		active: false,
		autoHeight: false,
		event: 'expand'
	    });
	    $(".tabs").tabs();
	    $(".tabs-ajax").tabs({
			ajaxOptions: {
				error: function(xhr, status, index, anchor) {
					$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
				}
			}
		})
	}

	function init() {
	    loadFileList(current_path);
	    loadGroupList();
	    $(".button").button();
	}

        $(document).ready(function() {
	    init();
	});
    </script>
  </head>
  <body>
    <div id="header">
      {% if not request.user %}
      <button class="button" onclick="$('#login-dialog').dialog({modal: true})">Login</button>
      <button class="button" onclick="$('#register-dialog').dialog({modal: true})">Register</button>
      {% else %}
      <p>Welcome, {{request.session.auth_credentials.0}}</p>
      <button class="button" onclick="logout()">Logout</button>
      {% endif %}
    </div>
    <div id="content">
      <div id="msg"><b>{{ msg }}</b></div>
      <div id="left">
	<div class="tabs">
	  <ul>
	    <li><a href="#file-uploader">Upload</a></li>
	    <li><a href="#file-searcher">Search</a></li>
	  </ul>
	  <div id="file-uploader">
	  </div>
	  <div id="file-searcher">
	    Displayname: <input onkeyup="if ($(this).val().length >= 2 && $(this).val() != current_search) { current_search = $(this).val(); search(current_path, 'file', {'displayname':$(this).val()}, '#search-result'); }"/>
	    <ul id="search-result">
	    </ul>
	  </div>
	</div>
      </div>
      <div id="right">
	<div class="tabs-ajax">
	  <ul>
	    <li><a href="#fileList-container">FileList</a></li>
	    <li><a href="#groupList-container">GroupList</a></li>
	  </ul>
	  <div id="fileList-container">
	  </div>
	  <div id="groupList-container">
	  </div>
	</div>
      </div>
      <div id="login-dialog" style="display: none;">
	Username:<input type="text" id="username" />
	Password:<input type="password" id="password" />
	<button class="button" value="Login" onclick="login($('#login-dialog #username').val(), $('#login-dialog #password').val())">Login</button>
      </div>
      <div id="register-dialog" style="display: none;">
	Username:<input type="text" id="username" />
	Password:<input type="password" id="password" />
	Confirm: <input type="password" id="confirm-password" />
	<button class="button" value="Login" onclick="register($('#register-dialog #username').val(), $('#register-dialog #password').val(), $('#register-dialog #confirm-password').val())">Register</button>
      </div>
    </div>
  </body>
</html>
  
